<template>
  <div>
    <div>
      <van-search
        @click="$router.push('/search')"
        placeholder="请输入搜索关键词"
      />
    </div>
    <div class="sort">
      <div class="sortLeft">
        <div
          v-for="(item, index) in list"
          :key="item.id"
          :class="index == n ? 'active' : ''"
          @click="n = index"
        >
          {{ item.catename }}
        </div>
      </div>
      <div class="sortRight"  v-if="list.length>0">
        <div
          class="right-item"
          v-for="item in list[n].children"
          :key="item.id"
          @click="$router.push('/list?id=' + item.id + '&type=2')"
        >
          <img :src="$pre + item.img" alt="" />
          <div class="text">{{ item.catename }}</div>
        </div>

        <!-- 无数据 -->
        <van-empty v-if="!list[n].children" description="暂无数据" />
      </div>
    </div>
  </div>
</template>

<script>
import { reqCates } from "../../http/http";
export default {
  data() {
    return {
      list: [],
      n: 0,
    };
  },
  mounted() {
    //获去一级分类
    reqCates().then((res) => {
      this.list = res.data.list;
    });
  },
  methods: {
    tolist(id) {
      // this.$router.push('/list?id='+id)
    },
  },
};
</script>

<style scoped lang="less">
@import "../../less/index.less";
.van-search {
  background: @primary;
}
.item {
  font-size: 0.4rem;
  padding: 0.2rem;
  margin: 0.2rem;
  border: 0.01rem solid #ccc;
}
.sort {
  min-height: 80vh;
  display: flex;
  overflow: hidden;
}
.sortLeft {
  border: 0.2rem solid transparent;

  width: 25%;
}
.sortRight {
  border: 0.2rem solid #eee;

  flex: 1;
}

.sortLeft {
  width: 2rem;
  border-right: 1px solid #ccc;
}
.sortLeft div {
  line-height: 0.8rem;
  background: #fff;
  color: #333;
  transition: all 0.2s;
  font-size: 0.26rem;
  text-align: center;
}
.sortLeft .active {
  background: @primary;
  color: #fff;
}

.right {
  flex: 1;
  overflow: hidden;
}
.right-item {
  width: 50%;
  float: left;
  padding: 0.2rem;
  box-sizing: border-box;
  text-align: center;
}
.right-item img {
  width: 80%;
  height: 1.5rem;
  border-radius: 50%;
}
.text {
  font-size: 0.24rem;
}
</style>
